import { useState, useCallback, useRef } from 'react'
import {Row, Col, Input,List, Typography,Button,Icon ,Tag,Menu, Dropdown,Card, Avatar, Space,Layout } from 'antd';
import Link from 'next/link'
import {withRouter} from 'next/router'
import HeaderLayout from '../../components/HeaderLayout';
const { Header, Content, Footer } = Layout
const data = [
    {
        title: '个人中心',
    },
    // {
    //     title: '我的关注',
    // },
    {
        title: '编辑文章',
    },

];

const ArticleEditor = (props) => {
    const [article, setArticle] = useState('')
    const [title, setTitle] = useState('123')

    function submit() {

    }
    const onChange = (e) => {
        console.log(e)
    }

    return (
        <>
            <Layout>
                <HeaderLayout/>
                <Content>
            <Row>
                <Col span={8}>
                        <Avatar shape="square" size={64} icon={<UserOutlined />} />
                        <Card title="推荐作者" extra={<a href="#">更多</a>} >
                            <List
                                itemLayout="horizontal"
                                dataSource={data}
                                renderItem={item => (
                                    <List.Item>
                                        <List.Item.Meta
                                            avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                                            title={<a href="https://ant.design">{item.title}</a>}
                                            description="Ant Design"
                                        />
                                    </List.Item>
                                )}
                            />
                        </Card>
                </Col>
                <Col span={16}>
                    author nikeName sex eMail
                </Col>
            </Row>
                </Content>
                <FooterLayout/>
            </Layout>
            <style jsx global>
                  {`
                .ant-card-head{
                    padding: 0 10px;
                }
                .ant-card-body{
                    padding: 0 10px;
                }
                `}
            </style>
        </>
    )
}

export default withRouter(ArticleEditor)